<template>
  <div>
    <input :multiple="multiple" type="file" class="edu-file-upload" @change="change" ref="edufileinput" :accept="accept" capture="camera">
  </div>
</template>

<script>
  export default {
    name: 'edu-upload',
    data() {
      return {
        files: []
      }
    },
    props: {
      // 上传文件最大限制
      maxLimit: {
        default: 1,
        type: Number
      },
      // 文件类型 TODO
      accept: {
        default: 'image/*',
        type: String
      },
      // 是否允许多文件上传
      multiple: {
        default: false,
        type: Boolean
      }
    },
    methods: {
      // 获取文件
      change(event) {
        // 暂存文件
        let files = this.files = Array.from(event.target.files);
        // 回调
        this.$emit('filesChange', files)
        // 重置上传组件
        this.$refs.edufileinput.value = null
      }
    }
  }
</script>

<style lang="stylus" scoped>
.edu-file-upload
  opacity 0
  width 100%
  height 100%
  position absolute
  top 0
  left 0
</style>

